<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.5/pixi.min.js"></script>
    <script>
        //Define any variables that are used in more than one function
            let cat, state;
            let TextureCache = PIXI.utils.TextureCache,
                    loader = PIXI.loader,
                    Sprite = PIXI.Sprite,
                    resources = PIXI.loader.resources,
                    Application = PIXI.Application;

            let app = new PIXI.Application({ width: 512, height: 512 })

            console.log(app)
            document.body.appendChild(app.view)

            PIXI.loader
            .add(["images/cat.png", "images/cat2.png", "images/tileset.png"])
            .load(setup);
            function keyboard(keyCode) {
                    let key = {};
                    key.code = keyCode;
                    key.isDown = false;
                    key.isUp = true;
                    key.press = undefined;
                    key.release = undefined;
                    //The `downHandler`
                    key.downHandler = event => {
                        if (event.keyCode === key.code) {
                            if (key.isUp && key.press) key.press();
                            key.isDown = true;
                            key.isUp = false;
                        }
                        event.preventDefault();
                    };

                    //The `upHandler`
                    key.upHandler = event => {
                        if (event.keyCode === key.code) {
                            if (key.isDown && key.release) key.release();
                            key.isDown = false;
                            key.isUp = true;
                        }
                        event.preventDefault();
                    };

                    //Attach event listeners
                    window.addEventListener(
                        "keydown", key.downHandler.bind(key), false
                    );
                    window.addEventListener(
                        "keyup", key.upHandler.bind(key), false
                    );
                    return key;
                }

            function setup() {

                //Create the `cat` sprite
                cat = new Sprite(resources["images/cat.png"].texture);
                cat.y = 96;
                cat.vx = 0;
                cat.vy = 0;
                app.stage.addChild(cat);

                //Capture the keyboard arrow keys
                let left = keyboard(37),
                    up = keyboard(38),
                    right = keyboard(39),
                    down = keyboard(40);

                //Left arrow key `press` method
                left.press = () => {
                    //Change the cat's velocity when the key is pressed
                    cat.vx = -5;
                    cat.vy = 0;
                };

                //Left arrow key `release` method
                left.release = () => {
                    //If the left arrow has been released, and the right arrow isn't down,
                    //and the cat isn't moving vertically:
                    //Stop the cat
                    if (!right.isDown && cat.vy === 0) {
                        cat.vx = 0;
                    }
                    if (right.isDown) {
                        cat.vx = 5;
                    }
                };

                //Up
                up.press = () => {
                    cat.vy = -5;
                    cat.vx = 0;
                };
                up.release = () => {
                    if (!down.isDown && cat.vx === 0) {
                        cat.vy = 0;
                    }
                    if (down.isDown) {
                        cat.vy = 5;
                    }
                };

                //Right
                right.press = () => {
                    cat.vx = 5;
                    cat.vy = 0;
                };
                right.release = () => {
                    if (!left.isDown && cat.vy === 0) {
                        cat.vx = 0;
                    }
                    if(left.isDown) {
                        cat.vx = -5;
                    }
                };

                //Down
                down.press = () => {
                    cat.vy = 5;
                    cat.vx = 0;
                };
                down.release = () => {
                    if (up.isDown) {
                        cat.vy = -5;
                    }
                    if (!up.isDown && cat.vx === 0) {
                        cat.vy = 0;
                    }
                };

                //Set the game state
                state = play;

                //Start the game loop
                app.ticker.add(delta => gameLoop(delta));
            }

            function gameLoop(delta) {

                //Update the current game state:
                state(delta);
            }

            function play(delta) {
                
                //Use the cat's velocity to make it move
                cat.x += cat.vx;
                cat.y += cat.vy
            }
    </script>
</body>
</html>